<template>
    <view class="bg-[#f8f8f8] min-h-screen">
        <view class="h-[10rpx]"></view>
        <view class="bg-[#fff]  pb-[10rpx] border-b border-[#EFEFEF] font-medium px-[46rpx] text-[30rpx]">
            <view class=" mt-[20rpx]">活动创建时间：<text class="ml-[30rpx]">2024.12.10 12:00</text></view>
            <view class="mt-[20rpx]">活动名称：<text class="ml-[30rpx]  ">中秋游园活动</text></view>
            <view class="mt-[20rpx] flex justify-between">
                <view>
                    <text>总人数：</text>
                    <text>128</text>
                </view>
                <view>
                    <text>已打卡：</text>
                    <text>128</text>
                </view>
                <view>
                    <text>未打卡：</text>
                    <text>128</text>
                </view>
            </view>
            <view @click="navigateTo('/pages/eventPersonnelDetails/eventPersonnelDetails')" class="mt-[20rpx] text-right text-[#FD755D] text-[34rpx]">详情></view>
        </view>
        <view class="pt-[20rpx] px-[46rpx] pb-[30rpx] bg-white border-b border-[#EFEFEF] font-medium text-[30rpx]">
            <view>活动券使用情况：</view>
            <view class="h-[236rpx]">
                <qiun-data-charts type="pie" :opts="opts" :chartData="chartData" />
            </view>
        </view>
        <view class="bg-white pt-[20rpx] px-[46rpx] font-medium text-[30rpx]">
            <view class="mt-[20rpx]">活动名称：<text class="ml-[30rpx]  ">中秋游园活动</text></view>
            <view class="mt-[20rpx]">活动简介：<text class="ml-[30rpx]  ">xxxxxxxxxxxxxx</text></view>

            <view class="mt-[20rpx]">活动范围：<text class="ml-[30rpx]  ">书法一班、书法二班、国画一班</text></view>

            <view class="mt-[20rpx]">打卡开始时间：<text class="ml-[30rpx]  ">2024.12.12 12:00</text></view>
            <view class="mt-[20rpx]">活动开始时间：<text class="ml-[30rpx]  ">2024.12.12 12:00</text></view>
            <view class="mt-[20rpx]">活动结束时间：<text class="ml-[30rpx]  ">2024.12.12 12:00</text></view>
            <view class="mt-[20rpx]">活动地址：<text class="ml-[30rpx]  ">七星路七星社区100号楼</text></view>
            <view class="mt-[20rpx]">活动券设置：<text class="ml-[30rpx]  "> 吹蜡烛、抛圈</text></view>
            <view class="mt-[20rpx]">活动情况：<text class="ml-[30rpx]  "> xxxxxxxxxxxxxx</text></view>
            <view class="mt-[20rpx]">活动图片：
                <view class="mt-20rpx flex items-center justify-between">
                    <image v-for="(item, index) in 4"
                        src="https://gangantao.com/image/20241216/489657c8-7f43-436b-a626-c1d7e390588a.png"
                        mode="widthFix" class="w-[152rpx] h-[152rpx]"></image>
                </view>
            </view>

        </view>
    </view>
</template>
<script setup>
import { ref } from 'vue'
const chartData = ref({
    series: [
        {
            data: [{ "name": "活动券1", "value": 32 }, { "name": "活动券2", "value": 34 }, { "name": "活动券3", "value": 28 }, { "name": "活动券4", "value": 46 }]
        }
    ]
})
const opts = ref({
    color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
    padding: [5, 5, 5, 5],
    enableScroll: false,
    legend: {
        orient: 'vertical',
        left: 'right'
    },
    extra: {
        pie: {
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: false,
            borderWidth: 3,
            borderColor: "#FFFFFF"
        }
    }
})
const navigateTo = (url) => {
  uni.navigateTo({
    url
  })
}
</script>